<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<!-- light-blue - v3.2.1 - 2016-01-15 -->
<!DOCTYPE html>
<html>
<head>
	<title>Light Blue - Responsive Admin Dashboard Template</title>

	<link href="${ctxStatic}/lightblue/css/application.css" rel="stylesheet">
	<link href="${ctxStatic}/bootstrap-table/bootstrap-table.min.css" rel="stylesheet">
	<link rel="shortcut icon" href="${ctxStatic}/lightblue/img/favicon.png">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta name="description" content="">
	<meta name="author" content="">
	<meta charset="utf-8">
</head>
<body style="">
	<div class="body">
		<form class="form-horizontal" role="form">
			<div class="container">
				<div class="row">
					<div class="col-sm-4">
						<div class="form-group">
							<label class="col-sm-4 control-label">归属公司</label>
							<div class="col-sm-8 input-group">
									<input type="text" class="form-control" disabled="disabled" id="1">
									<div class="input-group-btn">
										<button type="button" class="btn btn-danger" data-toggle="modal" data-target="#myModal2" data-backdrop="static"><i class="glyphicon glyphicon-zoom-in"></i></button>
									</div>
								</div>
						</div>
					</div>
					<div class="col-sm-4">
						<div class="form-group">
							<label class="col-sm-4 control-label">登录名</label>
							<div class="col-sm-8">
								<input type="text" id="2" class="form-control" placeholder="登录名">
							</div>
						</div>
					</div>
				</div>
				<div class="row">
					<div class="col-sm-4">
						<div class="form-group">
							<label class="col-sm-4 control-label">归属部门</label>
							<div class="col-sm-8 input-group">
									<input type="text" class="form-control" disabled="disabled" id="1">
									<div class="input-group-btn">
										<button type="button" class="btn btn-danger" data-toggle="modal" data-target="#myModal3" data-backdrop="static"><i class="glyphicon glyphicon-zoom-in"></i></button>
									</div>
								</div>
						</div>
					</div>
					<div class="col-sm-4">
						<div class="form-group">
							<label class="col-sm-4 control-label">姓名</label>
							<div class="col-sm-8">
								<input type="text" id="2" class="form-control" placeholder="姓名">
							</div>
						</div>
					</div>
					<div class="col-sm-4">
						<div class="form-group">
							<div class="col-sm-3">
								<button type="button" class="btn btn-info"
										data-placement="top" data-original-title=".btn .btn-info">
									&nbsp;查询&nbsp;
								</button>
							</div>
							<div class="col-sm-3">
								<button type="button" class="btn btn-info"
										data-placement="top" data-original-title=".btn .btn-info">
									&nbsp;导出&nbsp;
								</button>
							</div>
							<div class="col-sm-3">
								<button type="button" class="btn btn-info"
										data-placement="top" data-original-title=".btn .btn-info">
									&nbsp;导入&nbsp;
								</button>
							</div>
						</div>
					</div>
				</div>
			</div>
		</form>

	</div>
    <sys:message content="${message}"/>
	<div class="body">
		<table id="table1" data-toggle="table"
			   data-url="https://api.github.com/users/wenzhixin/repos"
			   data-query-params="queryParams"
			   data-pagination="true"
			   data-search="false"
			   data-height="300"
		       data-sort-name="name">
			<thead>
			<tr>
				<th data-field="name" data-sortable="true">Name</th>
				<th data-field="stargazers_count" data-sortable="true">Stars</th>
				<th data-field="forks_count" data-sortable="true">Forks</th>
				<th data-field="description" data-sortable="true">Description</th>
			</tr>
			</thead>
		</table>
	</div>
	</div>
		<div class="loader-wrap hiding hide">
			<i class="fa fa-circle-o-notch fa-spin"></i>
		</div>
	</div>
	<div id="myModal2" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
					<h4 class="modal-title" id="myModalLabel2">选择归属公司</h4>
				</div>
				<div class="modal-body">
					<div class="row">
							<div class="col-sm-8 col-sm-offset-2">
								<form class="form-horizontal" role="form">
									<div class="form-group">
										<label class="col-sm-4 control-label">查询条件</label>
										<div class="col-sm-8 input-group">
											<input type="search" class="form-control" id="search-input1">
                                                <span class="input-group-btn">
                                                    <button type="button" class="btn btn-inverse" id="dev-btn-search1">搜索</button>
                                                </span>
										</div>
									</div>
								</form>
							</div>
						</div>
					<div class="row">
							<div class="col-sm-8 col-sm-offset-2">
								<div id="dev-tree-container1"></div>
							</div>
						</div>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
					<button type="button" class="btn btn-primary">确定</button>
				</div>

			</div><!-- /.modal-content -->
		</div><!-- /.modal-dialog -->
	</div>
	<div id="myModal3" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
					<h4 class="modal-title" id="myModalLabel2">选择归属部门</h4>
				</div>
				<div class="modal-body">

				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
					<button type="button" class="btn btn-primary">确定</button>
				</div>

			</div><!-- /.modal-content -->
		</div><!-- /.modal-dialog -->
	</div>
	<!-- common libraries. required for every page-->
<script src="${ctxStatic}/lightblue/lib/jquery/dist/jquery.min.js"></script>
<script src="${ctxStatic}/lightblue/lib/jquery-pjax/jquery.pjax.js"></script>
<script src="${ctxStatic}/lightblue/lib/bootstrap-sass/assets/javascripts/bootstrap.min.js"></script>
<script src="${ctxStatic}/lightblue/lib/widgster/widgster.js"></script>
<script src="${ctxStatic}/lightblue/lib/underscore/underscore.js"></script>

<!-- common application js -->
<script src="${ctxStatic}/lightblue/js/app.js"></script>
<script src="${ctxStatic}/lightblue/js/settings.js"></script>




<!-- page specific scripts -->
<!-- page libs -->
<script src="${ctxStatic}/lightblue/lib/bootstrap-select/dist/js/bootstrap-select.min.js"></script>
<script src="${ctxStatic}/lightblue/lib/jquery-autosize/dist/autosize.min.js"></script>
<script src="${ctxStatic}/lightblue/lib/bootstrap3-wysihtml5-bower/dist/bootstrap3-wysihtml5.all.min.js"></script>
<script src="${ctxStatic}/lightblue/lib/select2/select2.min.js"></script>
<script src="${ctxStatic}/lightblue/lib/switchery/dist/switchery.min.js"></script>
<script src="${ctxStatic}/lightblue/lib/moment/moment.js"></script>
<script src="${ctxStatic}/lightblue/lib/eonasdan-bootstrap-datetimepicker/build/js/bootstrap-datetimepicker.min.js"></script>
<script src="${ctxStatic}/lightblue/lib/mjolnic-bootstrap-colorpicker/dist/js/bootstrap-colorpicker.min.js"></script>
<script src="${ctxStatic}/lightblue/lib/jquery.maskedinput/dist/jquery.maskedinput.min.js"></script>
<script src="${ctxStatic}/lightblue/lib/seiyria-bootstrap-slider/dist/bootstrap-slider.min.js"></script>
<%@include file="/WEB-INF/views/include/ntreeview.jsp" %>
<script src="${ctxStatic}/bootstrap-table/bootstrap-table.min.js"></script>
<script src="${ctxStatic}/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>

<script src="${ctxStatic}/lightblue/lib/bootstrap-select/dist/js/bootstrap-select.min.js"></script>
<script src="${ctxStatic}/lightblue/lib/underscore/underscore.js"></script>
<script src="${ctxStatic}/lightblue/lib/backbone/backbone.js"></script>
<script src="${ctxStatic}/lightblue/lib/backbone.paginator/lib/backbone.paginator.min.js"></script>
<script src="${ctxStatic}/lightblue/lib/backgrid/lib/backgrid.min.js"></script>
<script src="${ctxStatic}/lightblue/lib/backgrid-paginator/backgrid-paginator.js"></script>
<script src="${ctxStatic}/lightblue/lib/datatables/media/js/jquery.dataTables.min.js"></script>
<!-- page application js -->
<script src="${ctxStatic}/lightblue/js/forms-elements.js"></script>
<script src="${ctxStatic}/lightblue/js/tables-dynamic.js"></script>
<script src="${ctxStatic}/lightblue/js/ui-dialogs.js"></script>

<script>

	// 封装tree
	(function(win) {
		// 构造函数
		// opts = {
		// 	sbtnId: '搜索按钮ID',
		//  siptId: '搜索输入框ID',
		//  strcId: '树形容器ID'
		// }
		function DynamicTree(opts) {
			// 保证安全实例化
			if (!(this instanceof DynamicTree)) {
				return new DynamicTree(opts);
			}
			if (typeof opts !== 'object') {
				return;
			}
			this.opts = $.extend({}, opts);
			this.init();
		}
		// 绑定事件
		DynamicTree.prototype.init = function() {
			var that = this;
			var opts = that.opts;

			// 查询地址 （所有实例使用同一个地址）
			DynamicTree._dataUrl = '${ctx}/sys/office/treeData';
			// 查询按钮
			this.$sbtn = $('#' + opts.sbtnId);
			// 搜索输入框
			this.$sipt = $('#' + opts.siptId);
			// 树形容器
			this.$strc = $('#' + opts.strcId);

			// todo 初始化生成完整数
			makeTree(makeUrl(''), that.$strc);

			// 绑定事件
			this.$sipt.on('keyup input propertychange', function() {
				var s = $(this).val();
				makeTree(makeUrl(s), that.$strc);
			});

			this.$sbtn.on('click', function() {
				var s = that.$sipt.val();
				makeTree(makeUrl(s), that.$strc);
			});
		};

		// 生成树
		function makeTree(url, $con) {
			$.getJSON(url, function(data) {
				$con.treeview({
					data: data,
					onNodeSelected: function(event, node) {
						$('#officeContent').attr("src","${ctx}/sys/user/list?office.id="+node.id+"&office.name="+node.text);
					}
				});
			});
		}
		// 生成 url
		function makeUrl(s) {
			var url = DynamicTree._dataUrl;
			var ss = String(s);
			ss.length && (url = url + '?s=' + encodeURIComponent(ss));
			return url;
		}

		win.DynamicTree = DynamicTree;
	})(window);

	// 初始一个动态树
	DynamicTree({
		sbtnId: 'dev-btn-search1',
		siptId: 'search-input1',
		strcId: 'dev-tree-container1'
	});

	// 设置表格自适应大小
	$(window).resize(function() {
		$('#table1').bootstrapTable('resetView');
	});

</script>

</body>
</html>